<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="icon" href="/favicon.jpg" type="image/x-icon" />
    <!-- =====BOX ICONS===== -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2791089_jipt64000yc.css">
    <link rel="stylesheet" href="./assets/css/cursor.css">
    <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>

    <title>徐鑫的个人简历</title>
</head>

<body>
    <!--===== HEADER =====-->
    <header class="l-header">
        <nav class="nav bd-grid">
            <div>
                <a href="#" class="nav__logo">徐鑫</a>
            </div>

            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item"><a href="#home" class="nav__link active">主页</a></li>
                    <li class="nav__item"><a href="#about" class="nav__link">关于</a></li>
                    <li class="nav__item"><a href="#skills" class="nav__link">技能</a></li>
                    <li class="nav__item"><a href="#work" class="nav__link">作品</a></li>
                </ul>
            </div>

            <div class="nav__toggle" id="nav-toggle">
                <i class='bx bx-menu'></i>
            </div>
        </nav>
    </header>

    <main class="l-main">
        <!--===== HOME =====-->
        <section class="home bd-grid" id="home">
            <div class="home__data">
                <h1 class="home__title">Hi,<br>我是 <span class="home__title-color">徐鑫</span><br> Web developer</h1>

                <a href="tel:18964104925" class="button">联系我</a> 


            </div>

            <div class="home__social">
                <a href="https://blog.csdn.net/qq_30299191?spm=1000.2115.3001.5343" target="_blank" class="home__social-icon"><i
                        class='iconfont icon-csdn'></i></a>
                <a href="https://gitee.com/xxsoftware" class="home__social-icon" target="_blank"><i
                        class='iconfont icon-gitee-fill-round'></i></a>
                <a href="#" class="home__social-icon wechat"><i class='iconfont icon-weixin1'></i></a>
            </div>

            <div class="home__img">

                    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="home_blob">
                        <path fill="#3e6ff4" d="M47.8,-64.3C62.4,-55.2,75,-41.8,79.7,-26.2C84.4,-10.5,81.2,7.4,74.1,22.5C67,37.5,56,49.7,43,58.4C30,67.2,15,72.4,-0.6,73.3C-16.3,74.2,-32.5,70.7,-45.6,62C-58.7,53.3,-68.6,39.4,-75.6,23.3C-82.5,7.2,-86.4,-11.1,-81.1,-26C-75.8,-41,-61.2,-52.6,-46.2,-61.6C-31.1,-70.5,-15.6,-76.8,0.5,-77.5C16.6,-78.2,33.2,-73.4,47.8,-64.3Z" transform="translate(100 100)" />
                        <image class="home_blob-img" x=25 y=50 href="assets/img/perfil.png" />
                  </svg>
                  
            </div>
        </section>

        <!--===== ABOUT =====-->
        <section class="about section " id="about">
            <h2 class="section-title">关于</h2>

            <div class="about__container bd-grid">
                <div class="about__img">
                    <img src="assets/img/work_5.jpg" alt="">
                </div>

                <div>
                    <h2 class="about__subtitle">我是徐鑫</h2>
                    <p class="about__text">2021年毕业于上海电机学院网络工程专业，专业课有CSS和HTML的基础，在大三下学期开始自学前端。</p>
                </div>
            </div>
        </section>

        <!--===== SKILLS =====-->
        <section class="skills section" id="skills">
            <h2 class="section-title">技能</h2>

            <div class="skills__container bd-grid">
                <div>
                    <h2 class="skills__subtitle">Profesional Skills</h2>
                    <p class="skills__text">我熟练使用CSS/Javascript和Vue2/Vue3 及其全家桶(vue-router, vuex, 
                        vue-cli)，并对后端有一定的了解。</p>
                    <div class="skills_content ">
                        <div class="skills_header">
                            <i class='iconfont icon-code skills_fronticon'></i>
                            <h3>前端开发</h3>
                            <i class="iconfont icon-jiantoushang skills_arrow"></i>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='bx bxl-html5 skills__icon'></i>
                                    <span class="skills__name">HTML5</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">95%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__html"></div>
                            </div>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='bx bxl-css3 skills__icon'></i>
                                    <span class="skills__name">CSS3</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">85%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__css"></div>
                            </div>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='bx bxl-javascript skills__icon'></i>
                                    <span class="skills__name">JAVASCRIPT</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">65%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__js"></div>
                            </div>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='iconfont icon-vuejs-line  skills__icon'></i>
                                    <span class="skills__name">Vue2 / Vue3 全家桶</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">85%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__vue "></div>
                            </div>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='iconfont icon-xiazai1  skills__icon'></i>
                                    <span class="skills__name">Element UI</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">75%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__elem "></div>
                            </div>
                        </div>
                    </div>
                    <div class="skills_content">
                        <div class="skills_header">
                            <i class='iconfont icon-server-3'></i>
                            <h3>后端开发</h3>
                            <i class="iconfont icon-jiantoushang skills_arrow"></i>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='bx  bxl-javascript skills__icon'></i>
                                    <span class="skills__name">Node js</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">65%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__node"></div>
                            </div>
                        </div>
                        <div class="skills_info">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class='bx  bxl-javascript skills__icon'></i>
                                    <span class="skills__name">Koa</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">65%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__koa"></div>
                            </div>
                        </div>
  

                    </div>
                </div>

                <div>
                    <img src="assets/img/work_4.jpg" alt="" class="skills__img">
                </div>
            </div>
        </section>

        <!--===== WORK =====-->
        <section class="work section" id="work">
            <h2 class="section-title">作品</h2>

            <div class="mobile work__container bd-grid">
                <div class="work__img work__image">
                    <a href="https://gitee.com/xxsoftware/vue" target="_blank"><img src="assets/img/work1.jpg" class="item-img"></a>
                </div>
                <div class="work__img work__image">
                    <a href="https://gitee.com/xxsoftware/game-platform" target="_blank"><img src="assets/img/work2.jpg" class="item-img"></a>
                </div>
                <div class="work__img work__image">
                    <a href="https://gitee.com/xxsoftware/xx-resume" target="_blank"><img src="assets/img/work3.jpg" class="item-img"></a>
                </div>
            </div>
            <div class="pc  wrapper">
                <ul class="carousel_list">
                    <li class="work__image">
                        <a href="https://gitee.com/xxsoftware/vue" target="_blank"><img src="assets/img/work1.jpg" class="item-img"></a>
                    </li>
                    <li class="work__image">
                        <a href="https://gitee.com/xxsoftware/xx-resume" target="_blank"><img src="assets/img/work2.jpg" class="item-img"></a>
                    </li>
                    <li class="work__image">
                        <a href="https://gitee.com/xxsoftware/game-platform" target="_blank"><img src="assets/img/work3.jpg" class="item-img"></a>
                    </li>
                    <li class="work__image">
                        <a href="https://gitee.com/xxsoftware/vue" target="_blank"><img src="assets/img/work1.jpg" class="item-img"></a>
                    </li>
                </ul>
                <div class="button_wrap">
                    <button class="button button-left"><i class="fas fa-arrow-left"></i></button>
                    <button class="button button-right"><i class="fas fa-arrow-right"></i></button>
                </div>
                <ol class="circles">
                    <li data-n="0" class="active"></li>
                    <li data-n="1"></li>
                    <li data-n="2"></li>
                </ol>
            </div>
        </section>

    </main>

    <!--===== FOOTER =====-->
    <footer class="footer">
        <p class="footer__title">東雲研究所</p>
        <a href="https://blog.csdn.net/qq_30299191?spm=1000.2115.3001.5343" target="_blank" class="footer__icon"><i
                class='iconfont icon-icon_csdn'></i></a>
        <a href="https://gitee.com/xxsoftware" class="footer__icon" target="_blank"> <i class='iconfont icon-gitee'></i></a>
        <a href="#" class="footer__icon wechat"><i class='iconfont icon-shuyi_weixin'></i></a>
        <p>&#169; 2021 copyright all right reserved</p>
    </footer>

    <!-- mask -->
    <div class="mask isShow">
        <div class="imgbox">
            <i class="iconfont icon-times cancel"></i>
            <img src="./assets/img/wechat.jpg" alt="">
        </div>
    </div>

    <!--===== SCROLL REVEAL =====-->
    <script src="https://unpkg.com/scrollreveal"></script>

    <!--===== MAIN JS =====-->
    <script src="assets/js/main.js"></script>
    <script src="./assets/js/cursor.js"></script>
</body>

</html>
